<template>
  <div >

  <el-container >
    <el-header>
      <el-input
        v-model="queryInfo.noticeContent"
        @blur="getNoticeInfo"
        style="width:400px"
        placeholder="搜索学习资源"
        prefix-icon="el-icon-search"
      ></el-input> 
    </el-header>

    <el-main>
        <el-row>
          <el-col :span="5" v-for="(o, index) in noticeInfo" :key="index" :offset="index > 0 ? 1 : 0" >
            <el-card :body-style="{ padding: '10px' }">
              <img :src="o.poto" class="image">
              <div style="padding: 14px;">
                <span>{{o.name}}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ o.createTime }}</time>
                  <el-button type="text" class="button" @click="showUpdateNoticeDialog(o)">查看学习资料</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row> 

      <!--分页-->
      <el-pagination
        style="margin-top: 25px;text-align:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"

      >
      </el-pagination>
    </el-main>

    <el-dialog
      title="发布学习资源"
      :visible.sync="publishTableVisible"
      width="70%"
      @close="resetPublishForm"
      center
    >
      <el-form :model="publishForm" :rules="publishFormRules" ref="publishForm">
        <el-form-item label="学习资源内容" label-width="120px" prop="content">
          <div id="publishEditor"></div>
        </el-form-item> 
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="publishTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="publishNotice">发 布</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="资源详情"
      :visible.sync="updateTableVisible"
      width="40%"
      @close="$refs['updateForm'].resetFields()"
      left
    >
      <el-form :model="updateForm" :rules="updateFormRules" ref="updateForm">
         <div style="padding:0 20px ;">
            <div style="text-align: center;font-size: 30px;font-weight: bold;margin-bottom:10px">{{updateForm.name}}</div>
            <div v-html="updateForm.content"></div>
            <div style="margin-top:20px;">
              <video v-if="filetype=='mp4' || filetype=='MP4'" :src="updateForm.title" controls style="width:100%"></video>
              <a v-else :href="updateForm.title" target="_blank">{{updateForm.title}}</a>
            </div>
         </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <a   :href="updateForm.title" target="_blank" style="color:blue;margin-right:20px;border-bottom:0px solid">点击下载资源</a>
        <el-button @click="updateTableVisible = false">关 闭</el-button> 
      </div>
    </el-dialog>
  </el-container>
  </div>
</template>

<script>
// 导入富文本编辑器
import E from "wangeditor";
import notice from "@/api/notice";
import utils from "@/utils/utils";

export default {
  name: "NoticeManage",
  data() {
    return {
       currentDate: new Date(),
      //查询学习资源的参数
      queryInfo: {
        noticeContent: "",
        pageNo: 1,
        pageSize: 10,
      },
      //下拉选择框的数据
      optionInfo: [
        {
          label: "删除",
          desc: "delete",
        },
      ],
      //下拉框所选择的数据
      selected: "",
      // 所有学习资源信息
      noticeInfo: [],
      // 表格数据预加载
      loading: true,
      // 学习资源总数
      total: 0,
      // 被选中的表格行
      selectedInTable: [],
      // 发布学习资源对话框
      publishTableVisible: false,
      // 发布的表单
      publishForm: {
        content: "",
        status: "1",
      },
      publishFormRules: {
        content: [
          {
            required: true,
            message: "请输入学习资源内容",
            trigger: "blur",
          },
        ],
      },
      // 发布学习资源的富文本编辑器
      publishEditor: null,
      // 更新学习资源的富文本编辑器
      updateEditor: null,
      // 更新学习资源的对话框是否展示
      updateTableVisible: false,
      // 更新的表单
      updateForm: {
        nid: "",
        content: "",
        status: "",
      },
      updateFormRules: {
        content: [
          {
            required: true,
            message: "请输入学习资源内容",
            trigger: "blur",
          },
        ],
      },
      filetype:"",
      us:'',
      // 当前更新的学习资源的信息
      currentUpdateNoticeStatus: "",
    };
  },
  created() {
    this.us = localStorage.getItem("username");
    this.getNoticeInfo();
  },
  methods: {
    //获取用户信息
    getNoticeInfo() {
      notice.getAllNotice(this.queryInfo).then((resp) => {
        if (resp.code === 200) {
          this.noticeInfo = resp.data.data;
          this.total = resp.data.total;
          this.loading = false;
        } else {
          this.$notify({
            title: "Tips",
            message: "获取信息失败",
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    //表格某一行被选中
    handleSelectionChange(val) {
      this.selectedInTable = val;
    },
    //分页插件的大小改变
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getNoticeInfo();
    },
    //分页插件的页数
    handleCurrentChange(val) {
      this.queryInfo.pageNo = val;
      this.getNoticeInfo();
    },
    //功能下拉框被选择
    selectChange(val) {
      //清空上一次的操作
      this.selected = "";
      //表格中所选中的学习资源的id
      let ids = [];
      this.selectedInTable.map((item) => {
        if (item.status !== 1) {
          // **防止删除当前使用学习资源
          ids.push(item.nid);
        }
      });
      if (val === "delete") {
        //删除
        if (ids.length === 0) {
          this.$message.error("不允许删除当前使用学习资源");
        } else {
          notice.deleteNotice({ ids: ids.join(",") }).then((resp) => {
            if (resp.code === 200) {
              //删除成功后,回调更新数据
              this.getNoticeInfo();
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "success",
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: "操作失败",
                type: "error",
                duration: 2000,
              });
            }
          });
        }
      }
    },
    // 显示发布新闻对话框
    showPublishNoticeDialog() {
      this.publishTableVisible = true;
      window.setTimeout(() => {
        this.createPublishWangEditor();
      }, 200);
    },
    // 发布学习资源的表单信息重置
    resetPublishForm() {
      //清空表格数据
      this.$refs["publishForm"].resetFields();
    },
    // 创建新增新闻的富文本编辑器
    createPublishWangEditor() {
      if (!this.publishEditor) {
        this.publishEditor = new E("#publishEditor");
        this.publishEditor.create();
      }
      // 设置编辑区域高度为 300px
      this.publishEditor.config.height = 300;
      this.publishEditor.config.onchange = (html) => {
        this.publishForm.content = html;
      };
      this.publishEditor.txt.html(this.publishForm.content);
    },
    // 创建更新新闻的富文本编辑器
    createUpdateWangEditor() {
      if (!this.updateEditor) {
        this.updateEditor = new E("#updateEditor");
        this.updateEditor.create();
      }
      // 设置编辑区域高度为 300px
      this.updateEditor.config.height = 300;
      this.updateEditor.config.onchange = (html) => {
        this.updateForm.content = html;
      };
      this.updateEditor.txt.html(this.updateForm.content);
    },
    // 发布学习资源
    publishNotice() {
      utils.validFormAndInvoke(
        this.$refs["publishForm"],
        () => {
          notice.publishNotice(this.publishForm).then((resp) => {
            if (resp.code === 200) {
              this.getNoticeInfo();
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "success",
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "error",
                duration: 2000,
              });
            }
            this.publishTableVisible = false;
          });
        },
        "请检查您所填写的信息是否有误"
      );
    },
    // 显示更新学习资源的对话框
    showUpdateNoticeDialog(row) {
      this.updateForm  = row; 
      this.filetype = 'mp4';
      var fix = row.title.substring(row.title.lastIndexOf('.')+1,row.title.length)
      debugger;
      this.filetype = fix;
      this.updateTableVisible = true; 
    },
    // 更新学习资源
    updateNotice() {
      utils.validFormAndInvoke(
        this.$refs["updateForm"],
        () => {
          notice.updateNotice(this.updateForm).then((resp) => {
            if (resp.code === 200) {
              this.getNoticeInfo();
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "success",
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "Tips",
                message: resp.message,
                type: "error",
                duration: 2000,
              });
            }
            this.updateTableVisible = false;
          });
        },
        "请检查您所填写的信息是否有误"
      );
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../assets/css/admin/NoticeManage";
</style>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 180px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>